<template>
    <view class="page-wrapper">
        <up-tabs :list="tabList" lineColor="#15B8A6" :activeStyle="{ color: '#15B8A6' }" @click="changeType"></up-tabs>

        <view class="list-wrapper">
            <view class="list-item shadow-border" v-for="(item, index) in dataList" :key="index" @click="toSteupPage(item)">
                <image :src="item.image" mode="aspectFill" class="list-item-image"></image>
                <view class="list-item-title">{{item.title}}</view>
            </view>
        </view>

    </view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad, onShow, } from '@dcloudio/uni-app';
import { navigateToUniPage, } from '@/utils/index';
import { useI18n } from 'vue-i18n';

const { t } = useI18n();
const Type = {
    feed: 1,
    water: 2,
}
const activeType = ref(Type.feed);
const tabList = ref([
    { name: t('pages.addDevice.Feeder'), value: Type.feed },
    // { name: t('pages.addDevice.WaterFountain'), value: Type.water },
]);
const feedList = [
    { image: '/static/deviceType/SKI-050.jpg', title: 'SKI-050' },
    { image: '/static/deviceType/SKI-050.jpg', title: 'SKI-051' },
    { image: '/static/deviceType/SKI-050.jpg', title: 'SKI-052' },
];
const waterList = [
    { image: '/static/deviceType/W-100.jpg', title: 'W-100' },
    { image: '/static/deviceType/W-100.jpg', title: 'W-101' },
    { image: '/static/deviceType/W-100.jpg', title: 'W-102' },
];
const dataList = ref([]);

const changeType = (type)=>{
    activeType.value = type.value;
    if(type.value == Type.feed){
        dataList.value = feedList;
    }else{
        dataList.value = waterList;
    }   
}

const toSteupPage = (item)=>{
    let dtype = activeType.value == Type.water? 2: 1; // 主分类
    let cptype = '050'; // 二级分类
    navigateToUniPage(`/pages/configDevice/setup?title=${item.title}&deviceimg=${encodeURIComponent(item.image)}&dtype=${dtype}&cptype=${cptype}`);
}

onLoad(()=>{
    changeType(tabList.value[0]);
})
</script>

<style lang="scss" scoped>
.page-wrapper{
    padding: 20rpx 30rpx;
}
.head-row{
    display: flex;
    column-gap: 20rpx;
    align-items: center;
    margin-bottom: 20rpx;
}

.list-wrapper{
    margin-top: 70rpx;
    display: flex;
    flex-direction: column;
    column-gap: 20rpx;
    row-gap: 30rpx;
    margin-bottom: 20rpx;
    .list-item{
        display: flex;
        align-items: center;
        background: #FFFFFF;
        color: #374151;
        padding: 34rpx 50rpx;
        border-radius: 24rpx;
        font-size: 28rpx;
        .list-item-image{
            width: 120rpx;
            height: 120rpx;
            margin-right: 14rpx;
        }
    }
}

:deep(.u-tabs__wrapper__nav__item-active){
    background-color: #E2F8F6;
    border-radius: 20rpx;
}
</style>